<template>
	<view class="content">
		<view class="box">
			<view class="mybank">
				<view class="title">
					我的银行卡
				</view>
				<view class="bank-list">
					<view v-if="bankList.length==0" class="empty-box">
						<u-empty mode="list"></u-empty>
					</view>
					<view class="bank-item" v-for="item in bankList" @click="selectBank(item)"
						:style="{background: item.colour}">
						<view class="left">
							<view class="img-box">
								<view class="img">
									<u--image :showLoading="true" :src="$store.state.user.baseURL + item.img"
										width="50rpx" height="50rpx"></u--image>
								</view>
							</view>
							<view class="bank-name">
								<view class="bank-title">
									{{item.bank_open}}
								</view>
								<view class="bank-type">
									储蓄卡
								</view>
							</view>
						</view>
						<view class="right">
							{{item.bankCard}}
						</view>
					</view>
				</view>
				<view style="display: flex;justify-content: center;">
					<view class="addbank" @click="goAddBank">
						添加银行卡
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		hideBankCardNumber
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				bankList: [],
				paging: {
					page: 1,
					limit: 10,
				},
				total: null,
			}
		},
		onLoad() {
			this.getBankList()
		},
		onReachBottom() {
			this.getBankList()
		},
		onPullDownRefresh() {
			uni.startPullDownRefresh({
				success: () => this.refresh(),
				complete: () => uni.stopPullDownRefresh()
			})
		},
		methods: {
			selectBank(e) {
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				prevPage.$vm.bankValue(e)
				uni.navigateBack({
					delta: 1
				})
			},
			goAddBank() {
				uni.navigateTo({
					url: '/pages/index/pay/addbank'
				})
			},
			getBankList() {
				if (this.bankList.length == this.total) return
				this.$api.banklist(this.paging).then(res => {
					const arr = res.data.list.map(item => {
						return {
							...item,
							bankCard: hideBankCardNumber(item.bank_card)
						}
					})
					this.bankList = [...this.bankList, ...arr]
					this.total = res.data.total
					this.paging.page++
				})
			},
			getData() {
				this.refresh()
			},
			// 刷新列表
			refresh() {
				this.paging.page = 1
				this.total = null
				this.bankList = []
				this.getBankList()
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f5f5f5;
		min-height: 100vh;
		z-index: -1;
	}

	.box {
		padding: 0 30rpx;
		// padding-top: 30rpx;
		min-height: 100vh;
		z-index: -1;
	}

	.mybank {
		padding: 0 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		min-height: 100vh;
		z-index: -1;

		.title {
			padding-top: 60rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
			color: #111111;
			line-height: 44rpx;
			text-align: center;
			font-style: normal;
		}

		.bank-list {
			.bank-item {
				margin-top: 20rpx;
				background: #005BAB;
				border-radius: 20rpx;
				opacity: 0.8;
				padding: 30rpx 44rpx;
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;

					.img-box {
						width: 50rpx;
						height: 50rpx;
						background: #F0F0F0;
						border-radius: 100%;
						padding: 10rpx;
					}

					.bank-name {
						padding-left: 30rpx;

						.bank-title {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 36rpx;
							color: #FFFFFF;
							line-height: 44rpx;
							text-align: left;
							font-style: normal;
						}

						.bank-type {
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #FFFFFF;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
						}
					}
				}

				.right {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 70rpx;
					text-align: left;
					font-style: normal;
				}
			}
		}
	}

	.addbank {
		// position: fixed;
		// bottom: 200rpx;
		// left: 50%;
		// transform: translateX(-50%);
		margin-top: 40rpx;
		width: 630rpx;
		height: 84rpx;
		background: linear-gradient(270deg, #EA6F29 0%, #FAAA7D 100%);
		border-radius: 16rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 84rpx;
		text-align: center;
		font-style: normal;
	}
</style>